<!--
 * @Author: ranjianglai
 * @Date: 2023-01-12 17:27:41
 * @Description: 分段器
-->


<template>
    <view>
        <view class="cus-page">
            <u-subsection bgColor="#fff" fontSize="32rpx" activeColor="#02BDF3"
                :list="subsections" :current="current" @change="subsectionChange">
            </u-subsection>
        </view>
        <!-- 安全距离 -->
        <u-gap height="46px" bgColor="transparent"></u-gap>
    </view>
</template>


<script>
export default {
    name:'',
    components: {},
    props:{
        current: { type: Number, default: 0 },
        subsections: {
            type: Array,
            default: ()=>{
                return []
            }
        }
    },

    data () {
        return {}
    },

    computed: {},
    watch: {},

    mounted() {

    },

    methods: {
        subsectionChange(e){
            this.$emit("change",{current:e})
        }
    },
}
</script>


<style scoped lang='scss'>
    .cus-page{
        width: 100%;
        background: #fff;
        z-index: 10;
        position: fixed;
        top: 0;
        left: 0;
        /deep/.u-subsection--button{
            height: auto !important;
            padding: 32rpx 3px !important;
        }
        /deep/.u-subsection--button__bar{
            &:after{
                content: "";
                width: 60rpx;
                height: 6rpx;
                background: #02BDF3;
                border-radius: 4rpx;
                position: absolute;
                left: 50%;
                transform: translate(-50%);
                bottom: -20rpx;
            }
        }
    }
</style>